<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px">添加</el-button>
    <!-- 表格组件 
    data:表格组件将来需要展示的数据----数组类型
    border: 是给表格添加边框
    column属性 
    label 显示的标题
    align 对齐方式
     -->
    <el-table style="width: 100%" border>
      <!-- 列 -->
      <el-table-column prop="prop" label="序号" width="80px" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="品牌名称" width="width">
      </el-table-column>
      <el-table-column prop="prop" label="品牌logo" width="width">
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
      </el-table-column>
    </el-table>
    <!--
       分页器
       当前第几页、数据的总条数、每一页展示多少条数据、连续页码数、每一页显示的条数
        @size-change="handleSizeChange"
      @current-change="handleCurrentChange"

      current-page:代表的是当前第几页
      total：代表分页器一共需要展示数据条数
      page-size：代表的是每一页需要展示多少条数据
      page-sizes：代表可以设置每一页展示多少条数据
      layout：可以实现分页器布局
      pager-count:按钮的数量  如果 9  连续页码是7
     -->
    <el-pagination
    style="margin-top: 20px;textAlign: center"
     :current-page="6"
      :total="99"
       :page-size="3"
      :page-sizes="[3, 5, 10]"
      :page-count= "7"
      layout="prev, pager, next, jumper,->,sizes,total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "tradeMark",
  data() {
    return {
      // 当前分页数为第几页
      page: 1,
      limit: 3,
    }
  },
  mounted() {
    // 获取列表数据的函数
    this.getPageList()
  },
  methods: {
  
    // 获取品牌列表的数据
 async   getPageList() {
        // 解构出参数
    const { page, limit} = this
      // 获取品牌列表的接口
 let ret = await  this.$API.tradeMark.reqTradeMarkList(page,limit)
 console.log(ret);
    }
  }
};
</script>

<style>
</style>